<template>
  <div class="view-details">
    <van-nav-bar title="面经详情" class="nav-bar">
      <template #left>
        <div class="back" style="color: #ed6c1c" @click="back">返回</div>
      </template>
    </van-nav-bar>
    <div class="content">
      <div class="content-title">
        <h1>{{ details.stem }}</h1>
        <div class="content-time">
          <span>{{ details.createdAt }}</span>
          <span>|</span>
          <span>{{ details.views }} 浏览量</span>
          <span>|</span>
          <span>{{ details.likeCount }} 点赞数</span>
        </div>
        <div class="content-author">
          <div class="left"><img :src="details.avatar" alt="" /></div>
          <div class="right">{{ details.creator }}</div>
        </div>
      </div>
      <div class="content-bottom">
        <span>{{ details.content.replace(/<[^>]*>/g, "") }}</span>
      </div>
    </div>
    <div class="content-bottom-btn" >
      <div class="content-bottom-like" :style="{ backgroundColor: isLiked ? '#fec635' : '#fff' }" @click="like">
        <van-icon name="like-o" size="25" :color="isLiked ? '#fff' : '#000'" />
      </div>
      <div class="content-bottom-collect" :style="{ backgroundColor: isCollected ? '#fec635' : '#fff' }" @click="collect">
        <van-icon name="star-o" size="25" :color="isCollected ? '#fff' : '#000'" />
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { Toast } from "vant";
export default {
  data() {
    return {
      id: "",
      details: {},
      isLiked: false,
      isCollected: false,
    };
  },
  created() {
    //获取id  接受参数
    this.id = this.$route.params.id;
    this.getDetails();
    // 从 localStorage 读取 isLiked 和 isCollected 状态
    this.isLiked = JSON.parse(localStorage.getItem(`isLiked_${this.id}`)) || false;
    this.isCollected = JSON.parse(localStorage.getItem(`isCollected_${this.id}`)) || false;
  },  
  methods: {
    back() {
      this.$router.back();
    },
    getDetails() {
      axios({
        url: `http://interview-api-t.itheima.net/h5/interview/show?id=${this.id}`,
        method: "get",
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      })
        .then((res) => {
          // console.log(res);
          this.details = res.data.data;
        })
        .catch(() => {
          Toast("登录身份已过期，请重新登录");
          this.$router.push("/login");
        });
    },
    like() {
      this.isLiked = !this.isLiked;
      // 将 isLiked 状态存储到 localStorage
      localStorage.setItem(`isLiked_${this.id}`, JSON.stringify(this.isLiked));
      axios({
        url: `http://interview-api-t.itheima.net/h5/interview/opt`,
        method: "post",
        data: {
          id: this.id,
          optType: 1,
        },
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      });
      if (this.isLiked) {
        Toast.success("点赞成功");
      } else {
        Toast.success("取消点赞");
      }
    },
    collect() {
      this.isCollected = !this.isCollected;
      // 将 isCollected 状态存储到 localStorage
      localStorage.setItem(`isCollected_${this.id}`, JSON.stringify(this.isCollected));
      axios({
        url: `http://interview-api-t.itheima.net/h5/interview/opt`,
        method: "post",
        data: {
          id: this.id,
          optType: 2,
        },
        headers: {
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        },
      });
      if (this.isCollected) {
        Toast.success("收藏成功");
      } else {
        Toast.success("取消收藏");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.nav-bar {
  width: 100%;
  height: 100%;
  border-bottom: 1px solid #ed6c1c;
}
.content {
  width: 90%;
  margin: 0 auto;
  .content-title {
    h1 {
      font-size: 25px;
      font-weight: 700;
    }
    .content-time {
      font-size: 12px;
      color: #999;
    }
    .content-author {
      display: flex;
      margin-top: 15px;
      .left {
        width: 40px;
        height: 40px;
        margin-right: 10px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 50%;
        }
      }
      .right {
        flex: 1;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: start;
        font-size: 12px;
        color: #999;
      }
    }
  }
  .content-bottom {
    margin-top: 10px;
    span {
      font-size: 16px;
      font-weight: 700;
      color: #333;
      margin-bottom: 10px;
      line-height: 20px;
    }
  }
}
.content-bottom-btn {
  //固定定位
  position: fixed;
  bottom: 100px;
  right: 20px;
  // width: 100%;
  height: 50px;
  background-color: #fff;
  display: flex;
  box-sizing: border-box;
  .content-bottom-like {
    width: 40px;
    height: 40px;
    // background-color: #ed6c1c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10px;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  }
  .content-bottom-collect {
    width: 40px;
    height: 40px;
    // background-color: #ed6c1c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
  }
}
.content-time:nth-child(-n + 2) span {
  margin-right: 5px;
}
</style>
